<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #hidePages{
            display: none;
        }
        #go{
            cursor: pointer;
        }
        .nav{
            margin-top: 60px;
            margin-bottom: 20px;
        }
        h1 {
            margin-top: 5px;
        }

        hr {
            margin: 10px;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        table {
            text-align: center;
            border-collapse: collapse;
            width: 80%;
        }

        table.gridtable {
            font-family: verdana, arial, sans-serif;
            font-size: 11px;
            color: #333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }

        table.gridtable th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }

        table.gridtable td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }

        a {
            text-decoration: none;
        }
        #pageNo{
            width: 50px;
        }
        #select{
            margin-bottom: 10px;
        }
        #chz{
            margin-right: 15px;
        }
    </style>
</head>
<body>
<div align="center" class="nav">
    <h2>在线通讯录</h2>
    <span>查找联系人：</span><input id="select" type="text"/><button type="button" id="chz" th:onclick="|selectByName()|">查找</button><a th:href="@{/add1}">添加联系人</a>
    <table class="gridtable">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>手机号</th>
            <th>QQ</th>
            <th>Email</th>
            <th>地址</th>
            <th>操作</th>
        </tr>
        <tr th:each="contact:${pageInfo.list}">
            <td th:text="${contact.id}"></td>
            <td th:text="${contact.cname}"></td>
            <td th:text="${contact.mobile}"></td>
            <td th:text="${contact.qq}"></td>
            <td th:text="${contact.email}"></td>
            <td th:text="${contact.address}"></td>
            <td><a th:href="@{/getById(id=${contact.id})}">修改</a>
            <a th:href="@{/delById(id=${contact.id})}">删除</a></td>

        </tr>
    </table>
    <p>当前 <span th:text="${pageInfo.pageNum}"></span> 页,总 <span th:text="${pageInfo.pages}"></span> 页,共 <span th:text="${pageInfo.total}"></span>条记录</p>
    <a th:if="${pageInfo.pageNum}!=1" th:href="@{/getAllContact(pageNum=1)}">首页</a>
    <a th:if="${pageInfo.pageNum}!=1" th:href="@{/getAllContact(pageNum=${pageInfo.getPrePage()})}">上一页</a>
    <span id="hidePages" th:text="${pageInfo.pages}"></span>
    <input type="text" name="pageNo" id="pageNo"/>
    <span onclick="go()" id="go">go</span>
    <a th:if="${pageInfo.pageNum}!=${pageInfo.pages}" th:href="@{/getAllContact(pageNum=${pageInfo.getNextPage()})}">下一页</a>
    <a th:if="${pageInfo.pageNum}!=${pageInfo.pages}" th:href="@{/getAllContact(pageNum=${pageInfo.pages})}">尾页</a>
</div>
<script type="text/javascript" th:src="@{/js/jquery-3.6.1.js}"></script>
<script type="text/javascript">
    function selectByName(){
        var addText = $("#select").val();
        if (addText==""){
            alert("请输入您要查找的姓名")
        }else{
            location.href="/getContactByName?cname="+addText
        }

    }
    function go() {
        var po = $("#pageNo").val();
        var pa = $("#hidePages").text();
        console.log(po)
        console.log(pa)
        if (parseInt(po) > parseInt(pa)) {
            alert("您输入的页号不存在!");
        } else {
            location.href = "/getAllContact?pageNum=" + po;
        }
    }
</script>
</body>
</html>